大家好，在昨天有提到server side與client side運作的原理，今天我們進一步來談談SPA在路由上是如何應用的，並將搭配實例來說明。

當我們要造訪網站會透過網址路徑，由這個路徑去判斷我們請求對應的內容。傳統的方式是透過在server建立目錄與檔案，網址代表檔案路徑，每造訪一次就向server請求一次資源。SPA在前端可以做到在同一頁的網址與內容產生變化，還可以透過對應的路徑請求到相應的資源，這是怎麼做到的呢?

網址產生變化

1. history.pushState()

history物件提供瀏覽歷史資訊，在瀏覽器最常應用的是切換上/下頁的history.go().HTML5 API的history.pushState可以做到動態操控瀏覽器歷史紀錄。首先我們來做個小測試，打開Chrome，前往google.com，直接在console輸入執行以下程式碼:

history.pushState(null,null,'/hello')

此時你應該可以發現，除了網址變化，其他地方似乎沒有改變。當你對著剛剛的網址列按下Enter後，就會得到一個404的畫面.網址都一樣，為何呈現內容不一樣?

這邊要了解一件事，網址變化不代表會跟著跳轉。我們分別解析剛剛做的行為，利用history.pushState增加了瀏覽器歷史紀錄，因為是操控歷史紀錄沒有真正轉址，所以剛剛其實還停留在google.com的頁面。後來Enter這動作，代表重新轉址，因為在server沒有找到相對應的路徑，所以傳回了404頁面。

2. location.hash

location物件紀載了網址相關資訊，location.hash代表的是網址hash後面的部份(hash是#符號)。常看到的應用是同頁跳轉，可以通過點擊帶上#的網址，直接跳到同頁的某個區段，也就是我們所熟知的網頁錨點，同樣地這動作也不會重新發送請求。若要改變hash，我們可以使用以下語法:

location.hash='hello'

可以看到網址#後面多了hello，接著再來看看console裡也沒有跳轉紀錄。

我們再回顧昨天Gmail的例子:

當點擊其他分頁的按鈕，在網址hash後的部分產生了變化，同樣不會發送新的請求，這是因為瀏覽器在hash變化時不會重新發送請求。所以當我們要找出相對應的頁面內容，其實靠的就是變動的hash值。

小結

今日主要提到使用Javascript利用HTML5 API來讓網址產生變化，明天會接著說明如何知道網址產生變化，以及實際應用與示範，一起繼續努力!

推薦閱讀：
淺談新手在學習 SPA 時的常見問題：以 Router 為例 from Huli